<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">舱位订购</div>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3"
             id="myScrollspy">
          <div>{{row.address}}</div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-9 content  wow zoomIn">
          <div class="top">
            <div class="table-title">
              <span class="title-text">舱位详情</span>
            </div>
            <el-descriptions class="top-content"
                             title=""
                             direction="vertical"
                             :column="5"
                             border>
              <el-descriptions-item label="舱位编号">{{row.box_code}}</el-descriptions-item>
              <el-descriptions-item label="出发地">{{row.start_point_name}}</el-descriptions-item>
              <el-descriptions-item label="出发地编号">{{row.start_point}}</el-descriptions-item>
              <el-descriptions-item label="目的地">{{row.end_point_name}}</el-descriptions-item>
              <el-descriptions-item label="目的地编号">{{row.end_point}}</el-descriptions-item>

              <el-descriptions-item label="舱位发布时间"
                                    :span='2'>{{row.publish_time}}</el-descriptions-item>
              <el-descriptions-item label="舱位截止时间"
                                    :span='2'>{{row.end_time}}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag type="success"
                        size="small">销售中</el-tag>
                <!-- <el-tag :type="abletype" size="small">{{getable()}}</el-tag> -->
              </el-descriptions-item>

              <el-descriptions-item label="计划发出时间"
                                    :span='2'>{{row.etd_time}}</el-descriptions-item>
              <el-descriptions-item label="计划到达时间"
                                    :span='2'>{{row.eta_time}}</el-descriptions-item>
              <el-descriptions-item label="计划航程">{{linetime}}天</el-descriptions-item>

              <el-descriptions-item label="箱子类型">{{row.box_type}}</el-descriptions-item>
              <el-descriptions-item label="箱子尺寸">{{row.box_length}}</el-descriptions-item>
              <el-descriptions-item label="箱子代码">{{row.box_code+' '+row.box_type_code}}</el-descriptions-item>
              <el-descriptions-item label="箱子容积">{{row.box_volume}}</el-descriptions-item>
              <el-descriptions-item label="箱子载荷">{{row.box_payload}}</el-descriptions-item>

              <el-descriptions-item label="运输方式">{{getproduct_type()}}</el-descriptions-item>
              <el-descriptions-item label="运输费用">{{row.product_price+'  '}}CNY</el-descriptions-item>
              <el-descriptions-item label="运输条款">{{row.product_paytype}}</el-descriptions-item>
              <el-descriptions-item label="备注">{{row.product_remark ? row.product_remark : "无"}}</el-descriptions-item>
            </el-descriptions>
            <div class="table-title"
                 style="margin-top:20px">
              <span class="title-text">代运商</span>
            </div>
            <el-descriptions class="top-content"
                             title=""
                             direction="vertical"
                             :column="5"
                             border>
              <el-descriptions-item label="代运商">{{row.company_name}}</el-descriptions-item>
              <el-descriptions-item label="企业代码">{{row.company_code}}</el-descriptions-item>
              <el-descriptions-item label="财务人">{{row.company_finance_user}}</el-descriptions-item>
              <el-descriptions-item label="财务电话">{{row.company_finance_iphone}}</el-descriptions-item>
              <el-descriptions-item label="传真">{{row.company_fax}}</el-descriptions-item>
              <el-descriptions-item label="邮箱地址">{{row.company_email}}</el-descriptions-item>
              <el-descriptions-item label="企业地址">{{row.company_address}}</el-descriptions-item>
            </el-descriptions>
            <div class="table-title"
                 style="margin-top:20px">
              <span class="title-text">承运商</span>
            </div>
            <el-descriptions class="top-content"
                             title=""
                             direction="vertical"
                             :column="5"
                             border>
              <el-descriptions-item label="承运商">{{row.carrier_name}}</el-descriptions-item>
              <el-descriptions-item label="企业代码">{{row.carrier_code}}</el-descriptions-item>
              <el-descriptions-item label="运输号">{{row.trans_name}}</el-descriptions-item>
              <el-descriptions-item label="财务人">{{row.carrier_finance_user}}</el-descriptions-item>
              <el-descriptions-item label="财务电话">{{row.carrier_finance_iphone}}</el-descriptions-item>
              <el-descriptions-item label="传真">{{row.carrier_fax}}</el-descriptions-item>
              <el-descriptions-item label="邮箱地址">{{row.carrier_email}}</el-descriptions-item>
              <el-descriptions-item label="联系地址">{{row.carrier_address}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="foot">
            <div class="table-title">
              <span class="title-text">订购申请</span>
            </div>
            <el-form class="foot-content"
                     ref="form"
                     :model="form"
                     label-width="120px">
              <div style="display:flex;justify-content: space-between">
                <el-col :span="12">
                  <el-form-item label="货主名：">
                    <el-input v-model="form.owner_name"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">

                  <el-form-item label="身份证号：">
                    <el-input v-model="form.owner_idnumber"></el-input>
                  </el-form-item>
                </el-col>
              </div>

              <div style="display:flex;justify-content: space-between">
                <el-col :span="12">
                  <el-form-item label="电话：">
                    <el-input v-model="form.owner_iphone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="邮箱：">
                    <el-input v-model="form.owner_email"></el-input>
                  </el-form-item>
                </el-col>
              </div>

              <el-form-item label="门对门：">
                <el-switch v-model="door"></el-switch>
              </el-form-item>
              <div style="display:flex;justify-content: space-between">
                <el-col :span="12">
                  <el-form-item label="取货地址："
                                v-if="door === true">
                    <el-input v-model="form.start_address"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收货地址："
                                v-if="door === true">
                    <el-input v-model="form.end_address"></el-input>
                  </el-form-item>
                </el-col>
              </div>
              <div style="display:flex;justify-content: space-between">
                <el-col :span="12">
                  <el-form-item label="品名：">
                    <el-input v-model="form.goods_name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="货物类型：">
                    <el-select v-model="form.goods_type">
                      <el-option label="普通"
                                 value="1"></el-option>
                      <el-option label="危品"
                                 value="2"></el-option>
                      <el-option label="非标"
                                 value="3"></el-option>
                      <el-option label="冻货"
                                 value="4"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </div>

              <!-- 危险品信息 -->
              <el-card class="box-card"
                       v-if="form.goods_type === '2' ">
                <el-form-item label="IMO CLASS：">
                  <el-select v-model="form.IMO"
                             placeholder="请选择活动区域">
                    <el-option label="第1类 爆炸品 （IMO CLASS 1） "
                               value="1"></el-option>
                    <el-option label="第2类 压缩气体和液化气体 （IMO CLASS 2.1 / 2.2 2.3)"
                               value="2"></el-option>
                    <el-option label="第3类 易燃液体 （IMO CLASS 3 with Packing Group I, II, III）"
                               value="3"></el-option>
                    <el-option label="第4类 易燃固体、自燃物品和遇湿易燃物品。 (IMO CLASS 4.1 / 4.2 / 4.3) "
                               value="4"></el-option>
                    <el-option label="第5类 氧化剂和有机过氧化物 (IMO CLASS 5.1 / 5.2) "
                               value="5"></el-option>
                    <el-option label="第6类 毒害品和感染性物品 (IMO CLASS 6.1 / 6.2) "
                               value="6"></el-option>
                    <el-option label="第7类 放射性物品 （IMO CLASS 7） "
                               value="7"></el-option>
                    <el-option label="第8类 腐蚀品 （IMO CLASS 8）  "
                               value="8"></el-option>
                    <el-option label="第9类 杂类 （IMO CLASS 9） "
                               value="9"></el-option>
                  </el-select>
                </el-form-item>
                <div style="display:flex;justify-content: space-between;">
                  <el-col :span="12">
                    <el-form-item label="UN NO：">
                      <el-input v-model="form.UN"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="EMS NO：">
                      <el-input v-model="form.EMS"></el-input>
                    </el-form-item>
                  </el-col>
                </div>
                <div style="display:flex;justify-content: space-between;">
                  <el-col :span="12">
                    <el-form-item label="货物状态：">
                      <el-select v-model="form.goods_state"
                                 placeholder="请选择活动区域">
                        <el-option label="固体"
                                   value="1"></el-option>
                        <el-option label="液"
                                   value="2"></el-option>
                        <el-option label="气"
                                   value="3"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="污染物：">
                      <el-select v-model="form.contaminant"
                                 placeholder="请选择活动区域">
                        <el-option label="是"
                                   value="1"></el-option>
                        <el-option label="不是"
                                   value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </div>
                <div style="display:flex;justify-content: space-between;">
                  <el-col :span="12">
                    <el-form-item label="外包装：">
                      <el-input v-model="form.outer_packaging"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="紧急联系人：">
                      <el-input v-model="form.emergency_contact"></el-input>
                    </el-form-item>
                  </el-col>
                </div>
              </el-card>
              <el-card class="box-card"
                       v-if="form.goods_type === '3' ">
                <div style="display:flex;justify-content: space-between;">
                  <el-col :span="8">
                    <el-form-item label="长度(mm)：">
                      <el-input v-model="form.length"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="宽度(mm)：">
                      <el-input v-model="form.width"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="高度(mm)：">
                      <el-input v-model="form.height"></el-input>
                    </el-form-item>
                  </el-col>
                </div>
              </el-card>
              <el-card class="box-card"
                       v-if="form.goods_type === '4' ">
                <div style="display:flex;justify-content: space-between;">
                  <el-col :span="12">
                    <el-form-item label="温度设置：">
                      <el-input v-model="form.temperature"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="通风设置：">
                      <el-input v-model="form.airy"></el-input>
                    </el-form-item>
                  </el-col>
                </div>
              </el-card>
              <div style="display:flex;justify-content: space-between;padding-top:20px">
                <el-col :span="8">
                  <el-form-item label="件数：">
                    <el-input-number v-model="form.product_num"
                                     :step="1"
                                     size="small"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="毛重(KGS)：">
                    <el-input-number v-model="form.product_weight"
                                     :step="100"
                                     size="small"
                                     :min="500"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="体积(CBM)：">
                    <el-input-number v-model="form.product_volume"
                                     :precision="2"
                                     :step="0.1"
                                     size="small"></el-input-number>
                  </el-form-item>
                </el-col>
              </div>
              <div style="display:flex;justify-content: space-between">
                <el-col :span="15">
                  <el-form-item label="订舱要求：">
                    <el-input type="textarea"
                              v-model="form.remark"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="价格：">
                    <span class="total_price">{{gettotal_price()+'  '}}CNY</span>
                  </el-form-item>
                </el-col>
              </div>
              <el-form-item style="display:flex;justify-content: space-between;">
                <el-button type="primary"
                           @click="onSubmit('form')">立即创建</el-button>
                <el-button style="margin-left:50px">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { WOW } from "wowjs";
import bus from '@/utils/bus';
export default {
  // props:{
  //     row:{
  //         type:String,
  //         default:''
  //     }
  // },
  name: "ProductDetail",
  data () {
    return {
      num: 1,
      row: '',
      linetime: '',
      abletype: '',
      door: false,
      form: {
        users_id: this.$store.getters.userinfo.users_id,
        owner_name: this.$store.getters.userinfo.idname,
        owner_idnumber: this.$store.getters.userinfo.idnumber,
        owner_iphone: this.$store.getters.userinfo.iphone,
        owner_email: this.$store.getters.userinfo.email,
        start_address: '',
        end_address: '',
        goods_name: '',
        goods_type: '1',
        IMO: '',
        UN: '',
        EMS: '',
        goods_state: '',
        contaminant: '',
        outer_packaging: '',
        emergency_contact: '',
        length: '',
        width: '',
        height: '',
        temperature: '',
        airy: '',
        product_num: '',
        product_weight: '',
        product_volume: '',
        remark: '',
        total_price: '',
        // 舱位商品名
        product_name: '',
        // 创建时间
        create_time: ''
      },
    };
  },
  created () {
    this.row = this.$route.params.row
    console.log("dddd", this.row)
    this.form.product_name = this.row.product_name
    this.form.product_id = this.row.product_id
    this.getlinetime()
    this.getable()

  },
  computed: {
  },
  methods: {
    getlinetime () {
      var date1 = new Date(this.row.eta_time)
      var date2 = new Date(this.row.etd_time)
      var s1 = date1.getTime()
      var s2 = date2.getTime()
      var total = (s1 - s2) / 1000
      this.linetime = parseInt(total / (24 * 60 * 60))
    },
    getable () {
      var date1 = new Date()
      var date2 = new Date(this.row.end_time)
      var s1 = date1.getTime()
      var s2 = date2.getTime()
      var total = (s2 - s1) / 1000
      if (total >= 0) {
        this.abletype = 'success'
        return "销售中"
      }
      this.abletype = 'danger'
      return "已过期"
    },
    getproduct_type () {
      switch (this.row.product_type) {
        case 'sea':
          return "海运"
        case 'line':
          return "陆运"
        case 'air':
          return "空运"
        case 'railway':
          return "铁路"
        default:
          console.log('其他类型')
          return
      }
    },
    gettotal_price () {
      this.form.total_price = this.row.product_price * this.form.product_weight / 1000
      return this.form.total_price
    },
    onSubmit (formName) {
      console.log(this.form)

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('', '确认支付', {
            confirmButtonText: '支付完成',
            cancelButtonText: '想一想',
            type: 'success',
            center: true
          }).then(() => {
            // 生成订单
            this.form.create_time = this.utils.getNowTime()
            const api = '/order'
            this.$axios.post(api, this.form)
              .then(res => {
                console.log(res)
                this.$message({
                  type: 'success',
                  message: '支付成功!'
                });
              })
              .catch(err => {
                console.log(err)
                this.$message({
                  type: 'warning',
                  message: '提交失败!'
                });
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消订购'
            });
          });

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      //   console.log("??",row,rowIndex)
      if (rowIndex === 1) {
        return 'warning-row';
      }
      else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },

};
</script>

<style >
/* 表格 */
.el-table .warning-row {
  background: rgb(245, 189, 86);
}

.el-table .success-row {
  background: #c5ecb0;
}

.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}

.top {
  padding-top: 30px;
}
.foot {
  padding-top: 30px;
}
.top-content,
.foot-content {
  padding-top: 20px;
}
.total_price {
  color: rgb(216, 68, 68);
  font-weight: 600;
  font-size: 18px;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
ul.nav-tabs {
  width: 200px;
  margin-top: 40px;
  border-radius: 4px;
  background: #fff;
  z-index: 99999;
  border: 1px solid #474747;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
  text-align: center;
  margin: 0;
  border-top: 1px solid #474747;
}
ul.nav-tabs p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #474747;
  margin: 0;
  padding: 10px 0;
}
ul.nav-tabs li:first-child {
  border-top: none;
}
ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}
ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #474747;
  border: 1px solid #474747;
}
ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
  top: 30px;
}
.content-block {
  margin: 50px 0;
}
.content-block > h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
</style>
